import React from 'react';
import { Row, Col } from 'antd';
import _ from 'lodash';
import { useTranslation } from 'react-i18next';

interface Props {
  data: any;
}
export default function Index(props: Props) {
  const { t } = useTranslation('datasourceManage');
  const { data } = props;

  return (
    <div data-oid='pq8tebq'>
      <div className='page-title' data-oid='m--:bui'>
        HTTP
      </div>
      <div className='flash-cat-block' data-oid='vqdz7i7'>
        <Row gutter={16} data-oid='j.2ph.7'>
          <Col span={24} data-oid='512a:6a'>
            URL：
          </Col>
          <Col span={24} className='second-color' data-oid='42:hfkr'>
            {data?.http?.url}
          </Col>
        </Row>
      </div>
      <div className='page-title' data-oid='1j8hs1b'>
        {t('form.auth')}
      </div>
      <div className='flash-cat-block' data-oid='8ct0s26'>
        <Row gutter={16} data-oid='goi3jvx'>
          <Col span={8} data-oid='vsfgii9'>
            {t('form.username')}：
          </Col>
          <Col span={8} data-oid='3qeaj82'>
            {t('form.password')}：
          </Col>
          <Col span={8} data-oid='9bsepkl'>
            {t('form.skip_ssl_verify')}：
          </Col>
          <Col span={8} className='second-color' data-oid='ue7kd::'>
            {data?.auth?.basic_auth ? data?.auth?.basic_auth_user : '-'}
          </Col>
          <Col span={8} className='second-color' data-oid='u8xe4v2'>
            {data?.auth?.basic_auth ? '******' : '-'}
          </Col>
          <Col span={8} className='second-color' data-oid='0api34c'>
            {data.http?.tls?.skip_tls_verify ? t('form.yes') : t('form.no')}
          </Col>
        </Row>
      </div>
      {!_.isEmpty(data?.http?.headers) && (
        <>
          <div className='page-title' data-oid='5avttgh'>
            {t('form.headers')}
          </div>
          <div className='flash-cat-block' data-oid='e:wz-zo'>
            <Row gutter={16} data-oid='y2z2v71'>
              {_.map(data?.http?.headers, (val, key) => {
                return (
                  <Col key={key} span={24} data-oid='huh_bx0'>
                    {key + ' : ' + val}
                  </Col>
                );
              })}
            </Row>
          </div>
        </>
      )}
      <div className='page-title' data-oid='k2ngc-t'>
        {t('form.other')}
      </div>
      <div className='flash-cat-block' data-oid='pi5oya-'>
        <Row gutter={16} data-oid='v7.z61x'>
          <Col span={24} data-oid='3p1dpyk'>
            Remote Write URL：
          </Col>
          <Col span={24} className='second-color' data-oid='em6mqy3'>
            {data.settings?.write_addr || '-'}
          </Col>
        </Row>
        <Row gutter={16} data-oid='bwk.m8_'>
          <Col span={24} data-oid='dgj9ow5'>
            {t('form.prom.read_addr')}：
          </Col>
          <Col span={24} className='second-color' data-oid='v:p_5wf'>
            {data.settings?.internal_addr || '-'}
          </Col>
        </Row>
        <Row gutter={16} data-oid='qcm1-am'>
          <Col span={24} data-oid='u6j1j-_'>
            {t('form.cluster')}：
          </Col>
          <Col span={24} className='second-color' data-oid='g:.hsme'>
            {data?.cluster_name || '-'}
          </Col>
        </Row>
        <Row gutter={16} data-oid='fgjxsnx'>
          <Col span={24} data-oid='vboo5f:'>
            {t('form.prom.tsdb_type')}：
          </Col>
          <Col span={24} className='second-color' data-oid='.zc5e3r'>
            {data.settings?.['prometheus.tsdb_type'] || '-'}
          </Col>
        </Row>
      </div>
    </div>
  );
}
